<template>
  <div class="shopview">
    <div class="header">
      <h3>购物车</h3>
    </div>
    <div class="main">
      <img src="../assets/style/empty.png" alt="" v-if="!isplay">
      <ShopItem :shoplist="shoplist" v-else></ShopItem>
    </div>
    <div class="footer">
      <van-divider
        :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
        精心挑选
      </van-divider>
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-grid :column-num="2">
            <ListItem v-for="item in list" :key="item.id" :item="item"></ListItem>
        </van-grid>
      </van-pull-refresh>
      
    </div>
  </div>
</template>

<script>
import ListItem from '../components/ListItem.vue'
import ShopItem from '../components/ShopItem.vue'
export default {
    name:"ShopView",
    data() {
    return {
      isLoading:false,
      list:[],
      shoplist:[],
      isplay:false,
    };
  },
  methods: {
    async onRefresh() {
      this.list=[];
      let a=Math.ceil(Math.random()*18);
      let b=a>=10?'lk0'+a:'lk00'+a;
      let res= await this.$http.getListItem1(b+'.json');
      setTimeout(() => {
        // Toast('刷新成功');
        this.isLoading =false;
        this.list=res.data.data.cate[0].products;     
      }, 1000);
    }
  },
  components:{
    ListItem,
    ShopItem
  },
  async created() {
    let res=await this.$http.getHomeApi({start:0,end:10});
    this.list=res.data.data.list[12].product_list;
    
    if(localStorage.getItem("taken")){
       this.shoplist=this.$store.state.list;     
    }else{
        this.shoplist=[]; 
    }
    if(this.shoplist.length!=0){
      this.isplay=true;
    }else{
      this.isplay=false;
    }
  },
  mounted() {
    if(this.shoplist.length!=0){
      this.isplay=true;
    }else{
      this.isplay=false;
    }
  }
}
</script>

<style lang="scss">
  .shopview{
    font-size:.16rem;
    width: 100vw;
    .header{
      font-size:.3rem;
      text-align:center;
    }
    .main{
      width: 100%;
      height: 100%;
      img{
        width: 100%;
        height: 100%;
      }
      .shopitem{
        width: 100%;
      }
    }
    .footer{
      height: 50vh;
      .van-grid{
        padding:0 .16rem;
        justify-content: space-around;
      }
    }
  }
</style>